<template>
	<view class="" :style="{'overflow':isShow?'hidden':'visible'}">
		<page-meta :page-style="'overflow:'+(isShow?'hidden':'visible')"></page-meta>
		<view class="fiexd-nav" :class="isBg?'bg-content':''">
			<uni-nav-bar left-icon="left"  @clickLeft="back" :title="detailData.hotelName" backgroundColor="rgba(0,0,0,0)" :color="isBg?'#333':'#fff'"></uni-nav-bar>
		</view>
		<view class="imgs-content" v-if="detailData.hotelName && detailData.pictures.length>=1">
			<swiper class="image-swiper" :current="current">
				<swiper-item class="item-images-swiper" v-for="(item,index) in detailData.pictures" :key="index">
					<view class="swiper-item">
						<image :src="item.path" @error="onErrorImg()" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="all-nums" @click="allImg(detailData && detailData.pictures && detailData.pictures)">
				<view class="nums">{{detailData && detailData.pictures && detailData.pictures.length}}</view>
				<image class="img-icon" src="https://qiniu-cdn.maeiyun.com/imgs/hotel/imgs.png" mode=""></image>
				<view class="right-icon"></view>
			</view>
		</view>

		<view class="hotel-info" v-if="detailData.hotelName">
			<view class="hotel-name">{{detailData.hotelName}}</view>
			<view class="hotel-date">
				<view class="pingfen">
					<uni-rate size="14" :value="detailData.avgScore" readonly color="#bbb" active-color="red" />
					<view class="pingfen-num">{{detailData.avgScore >= '5'?'5.0':detailData.avgScore}}</view>
					<view class="commont-lines" @click="toEval">{{detailData.content_num}}条评论 ></view>
				</view>
				<view class="location-comment">
					<view class="left-local">
						<view class="nums">{{detailData.address}}</view>
						<view class="juli">{{detailData.address}} </view>
					</view>
					<view class="right-info">
						<view class="" style="margin-right: 31rpx;" @click="openLoaction">
							<image src="https://qiniu-cdn.maeiyun.com/imgs/hotel/loca.png" mode=""></image>
							<view>地图</view>
						</view>
						<view class="" @click="callphone">
							<image src="https://qiniu-cdn.maeiyun.com/imgs/hotel/p1.png" mode=""></image>
							<view>电话</view>
						</view>
					</view>

				</view>
			</view>

		</view>
		<view class="hotel-content-list" v-if="roomData.length>0">
			<view class="list">
				<view class="item-list" v-for="(item,index) in roomData" :key="index">
					<view class="inner-item-hotel">
						<image v-if="item.pictures.length>0" class="hotel-img" :src="item.pictures[0].path"
							mode="aspectFill" @click="previewImg(item.pictures)"></image>
						<image v-else class="hotel-img" src="https://qiniu-cdn.maeiyun.com/imgs/index/error.png"
							mode=""></image>
						<view class="right-hotel-info">
							<view class="hotel-title" style="word-break: break-all;
				word-wrap: break-word;
				white-space: pre-wrap;">
								{{item.roomName}}
							</view>
							<view class="room-introduction" style="padding-bottom: 30rpx;">
								{{item.capacity?'可住'+item.capacity+'人':''}} {{item.bedType}} {{item.windowType}}
								{{item.useableArea == '㎡'?'':item.useableArea}}
							</view>
						</view>
						<image v-if="item.ratePlans.length>1" @click="item.zhan = !item.zhan"
							:class="item.zhan?'unpack-img rotate180-dao ':'unpack-img rotate180'"
							src="https://qiniu-cdn.maeiyun.com/imgs/hotel/t1.png" mode=""></image>
					</view>
					<view class="list-content-inner">
						<view class="inner-list" :style="{borderTop: indexs == 0?'0':'1rpx solid #E2E2E2;'}"
							v-if="!item.zhan?indexs == 0:true" v-for="(items,indexs) in item.ratePlans" :key="indexs"
							@click.stop="todetail(item,items)">
							<view class="right-hotel-info inner-inner-right-hotel-info">
								<view class="hotel-title">
									{{items.ratePlanName}}
								</view>
								<view class="room-introduction inner-room-introduction">
									<view>{{item.capacity?'可住'+item.capacity+'人':''}} {{items.bedType}}
										{{item.windowType}} {{item.useableArea == '㎡'?'':item.useableArea}}</view>
									<!-- <view class="tits">
										<view class="item-tit">{{items.cancelRule.name}}</view>
									</view> -->
								</view>
							</view>
							<view class="inner-price">
								<view class="price-lines">
									<text>￥</text><text class="price">{{items.averagePrice}}</text><text>元</text>
								</view>
								<view class="yuding-btn" @click.stop="todetail(item,items)">
									抢购
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="roompopup" type="bottom">
			<view class="room-popup-content">
				<view class="swiper-content">
					<image @click="closePopup" class="close-img"
						src="https://qiniu-cdn.maeiyun.com/imgs/hotel/close.png" mode=""></image>
					<swiper class="room-popup-swiper" @change="swiperPopup" indicator-active-color="#fff">
						<swiper-item class="item-room-popup-swiper" v-for="(item,index) in currentRoomImg" :key="index">
							<view class="item-room-popup-swiper-content">
								<image :src="item.path" mode="aspectFill"></image>
							</view>
							<view>{{item}}</view>
						</swiper-item>
					</swiper>
					<view class="all-nums" style="position: absolute;bottom: 30rpx;" @click="allImg(currentRoomImg)">
						<view class="nums">{{currentIndex+1}}/{{currentRoomImg.length}}</view>
						<image class="img-icon" src="https://qiniu-cdn.maeiyun.com/imgs/hotel/imgs.png" mode=""></image>
						<view class="right-icon"></view>
					</view>
				</view>
				<view class="box-content">
					<view class="room-introduction">
						<view class="introduction-title">
							{{currentRoomItem.ratePlanName}}
						</view>
						<view class="tit-list">
							<view class="each-tit" v-if="currentRoom.useableArea">
								<image v-if="currentRoom.useableArea == '㎡'"
									src="https://qiniu-cdn.maeiyun.com/imgs/hotel/kongtiao.png" mode=""></image>
								<image v-else src="https://qiniu-cdn.maeiyun.com/imgs/lvyou/i5.png" mode=""></image>
								<view>{{currentRoom.useableArea == '㎡'?'空调':currentRoom.useableArea}}</view>
							</view>
							<view class="each-tit" v-if="currentRoom.floor">
								<image src="https://qiniu-cdn.maeiyun.com/imgs/lvyou/i1.png" mode=""></image>
								<view>{{currentRoom.floor}}层</view>
							</view>
							<view class="each-tit">
								<image src="https://qiniu-cdn.maeiyun.com/imgs/lvyou/i4.png" mode=""></image>
								<view><text style="color: #049FB5;">免费</text>客房WIFI</view>
							</view>
							<view class="each-tit" v-if="currentRoom.windowType">
								<image src="https://qiniu-cdn.maeiyun.com/imgs/lvyou/i2.png" mode=""></image>
								<view>{{currentRoom.windowType}}</view>
							</view>
							<view class="each-tit">
								<image src="https://qiniu-cdn.maeiyun.com/imgs/lvyou/i3.png" mode=""></image>
								<view>禁烟</view>
							</view>
						</view>
					</view>
					<view class="room-introduction">
						<view class="introduction-title">
							政策与服务
						</view>
						<view class="lines-content">
							<view class="lines-title">预订说明</view>
							<view class="">
								最多预订14天,最多预订3间,最早入住前90天0点前预订,可享受当前优惠价格如需发票，请向酒店前台索取
							</view>
						</view>
						<view class="lines-content">
							<view class="lines-title">使用规则</view>
							<view class="">
								直接消费，无需美团券，携带所有入住人的有效身份证办理入住，
								入住必须按照一人一证请在14:00之后入住并于次日12:00之前退房:如需提前入住或延时退房，请咨询商家。
								入住需要押金，金额以前台为准
							</view>
						</view>
						<view class="lines-content">
							<view class="lines-title">房型说明</view>
							<view class="">
								房型图片仅可代表其中部分房间以作为预订参考，实际提供房型信息请以文字信息为准，如文字信息不全或包含多种情况请提前与商家沟通确认后再下单预订
							</view>
						</view>
						<view class="lines-content">
							<view class="lines-title">儿童加床</view>
							<view class="">
								详询酒店。
								18岁及以上客人按成人收费
							</view>
						</view>
						<view class="lines-content" v-if="currentRoom.desc">
							<view class="lines-title">取消政策</view>
							<view class="">
								{{currentRoom.desc}}
							</view>
						</view>
					</view>
				</view>
				<view class="popup-room-price" @click="reserve(currentRoomItem,currentRoom)">
					<view class="price-lines">
						<text>￥</text><text
							class="price">{{currentRoomItem.averagePrice}}</text><text>元</text><text>起</text>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<ability-loading style="margin: 120rpx auto;transform: scale(3);" v-if="loading" />
		
		<u-modal v-model="isPshow" title="提示" content="信息查询失败,请更换其他酒店" @confirm="back"></u-modal>
	</view>
</template>

<script>
	import publicData from './public/public.js'
	import {
		wgs84_to_gcj02
	} from "../../common/js/wgs84_to_gcj02.js"
	// import { image } from 'html2canvas/dist/types/css/types/image'
	export default {
		data() {
			return {
				currentRoomImg: [],
				currentRoomItem: {},
				currentRoom: {},
				current: 0,
				id: "", //酒店id
				detailData: {},
				roomData: [],
				start: [
					"",
					"一星级",
					"二星级",
					"三星级",
					"四星级",
					"五星级",
					"经济型",
					"舒适型",
					"高档型",
					"豪华型",
				],
				isShow: false,
				mainImg: '',
				currentIndex: 0,
				isBg:false,
				isPshow:false,
				
				loading:true,
			}
		},
		onLoad(option) {
			this.id = option.id
			this.mainImg = option.img
			this.roomData = []
			this.getHotelDetail()
			
		},
		onBackPress(from) {
			if (this.isShow) {
				this.isShow = false
				this.$refs.roompopup.close()
				return true; // 此处返回 true 表示阻止页面跳转或关闭
			} else {
				return false; // 此处返回 true 表示阻止页面跳转或关闭
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			previewImg(e){
				let arr = []
				e.forEach(item=>{
					arr.push(item.path)
				})
				uni.previewImage({
					urls:arr
				})
			},
			toEval() {
				uni.navigateTo({
					url: '/otherpages/hotel/eval?id=' + this.detailData.hotelID
				})
			},
			openLoaction(item) {
				var obj = wgs84_to_gcj02(Number(this.detailData.googleLon), Number(this.detailData.googleLat))
				uni.openLocation({
					latitude: obj[1],
					longitude: obj[0],
					name: this.detailData.hotelName,
					address: this.detailData.address,
					success: function() {
						// console.log('success');
					}
				});
			},
			callphone() {
				var that = this
				uni.showActionSheet({
					itemList: [...this.detailData.phone],
					success: function(res) {
						uni.setClipboardData({
							data: that.detailData.phone[res.tapIndex],
							success: function() {
								that.$util.msg("复制成功")
							}
						});
					},
					fail: function(res) {
						// console.log(res.errMsg);
					}
				});
			},
			changeImg(item) {
				this.current = item.id;
			},
			closePopup() {
				this.isShow = false
				this.$refs.roompopup.close()
			},
			todetail(item, items) {
				this.currentRoom = item
				this.currentRoomImg = item.pictures.length > 0 ? item.pictures : [{
					'path': 'https://qiniu-cdn.maeiyun.com/imgs/index/error.png'
				}]
				this.currentRoomItem = items
				this.isShow = true
				this.currentIndex = 0
				this.$refs.roompopup.open('bottom')
			},
			swiperPopup(e) {
				this.currentIndex = e.detail.current
			},
			allImg(imgs) {
				publicData.pictures = imgs
				uni.navigateTo({
					url: '/otherpages/hotel/hotelImgs'
				})
			},
			onErrorImg() {
				this.detailData.mainImage = 'https://qiniu-cdn.maeiyun.com/imgs/index/error.png'
			},
			reserve(items, item) {
				publicData.selectHotel = item
				publicData.selectHotel.phone = this.detailData.phone
				publicData.selectHotel.hotelID = this.detailData.hotelID
				publicData.selectHotel.hotelName = this.detailData.hotelName
				publicData.selectHotel.mainImage = this.mainImg

				publicData.selectRoom = items
				uni.navigateTo({
					url: '/otherpages/hotel/hotelOrder'
				})
			},
			getHotelDetail() {
				var that = this
				this.request.httpTokenRequest({
					url: "hotel/read",
					method: 'post'
				}, {
					hotelID: this.id,
					checkInDate: publicData.screeningCondition.checkInDate, //	
					checkOutDate: publicData.screeningCondition.checkOutDate,
				}).then(res => {
					if (res.code == 0) {
						that.loading = false
						if(!res.data.data.pictures && !res.data.data.description && !res.data.data.phone && !res.data.data.facilities){
							that.isPshow = true
						}else{
							if(res.data.data.pictures.length == 0 || res.data.data.pictures.length<1){
								res.data.data.pictures = [{'path':'https://qiniu-cdn.maeiyun.com/imgs/hotel/error-1.png'}]
							}else{
								publicData.pictures = res.data.data.pictures
							}
							
							that.detailData = res.data.data
							that.getRoom()
						}
						
					}else {
						this.$util.msg(res.msg)
					}
				}, error => {

				})
			},
			getRoom() {
				uni.showLoading({
					title: '加载中'
				});
				this.request.httpTokenRequest({
					url: "hotel/roomList",
					method: 'post'
				}, {
					hotelID: this.id,
					checkInDate: publicData.screeningCondition.checkInDate, //	
					checkOutDate: publicData.screeningCondition.checkOutDate,
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						res.data.data.rooms.map(item => {
							item.zhan = false
							this.roomData.push(item)
						})
					}
				}, error => {
					uni.hideLoading();
				})
			}
		},
		onPageScroll(e) {
			if(e.scrollTop>100){
				this.isBg = true
			}else{
				this.isBg = false
			}
		},
		beforeDestroy(){
			uni.hideLoading();
		},
	}
</script>

<style lang="scss">
	.fiexd-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		padding-top: var(--status-bar-height);
	}
	.bg-content{
		background: rgb(245, 247, 248);
	}

	.imgs-content {
		width: 100%;
		height: 400rpx;
		position: relative;

		.image-swiper {
			height: 400rpx;

			.item-images-swiper {
				height: 400rpx;

				image {
					height: 400rpx;
				}
			}
		}

		.imags-type {
			display: flex;
			align-items: center;
			height: 42rpx;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 20rpx;
			position: absolute;
			bottom: 110rpx;
			left: 30rpx;

			.item-imgs-type {
				height: 38rpx;
				border-radius: 20rpx;
				text-align: center;
				line-height: 38rpx;
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				padding: 0 25rpx;
			}

			.select-item-imgs-type {
				background-color: #FFFFFF;
				color: #313131;
			}
		}


	}

	.all-nums {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 110rpx;
		right: 30rpx;
		height: 42rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 20rpx;
		padding: 0 16rpx;

		.nums {
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.img-icon {
			width: 24rpx;
			height: 24rpx;
			margin: 0 9rpx;
		}

		.right-icon {
			border-style: solid;
			border-color: transparent;
			border-width: 10rpx 0 10rpx 10rpx;
			border-left-color: #FFFFFF;
		}
	}

	.hotel-info {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx 30rpx 30rpx;
		margin-top: -84rpx;
		border-radius: 20rpx;
		z-index: 20;
		position: relative;

		.hotel-name {
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #2A2B2E;
			line-height: 40rpx;
		}

		.hotel-date {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 29rpx;
		}

		.pingfen {
			width: 208rpx;
			height: 146rpx;
			background: url('https://qiniu-cdn.maeiyun.com/imgs/hotel/a2.png')no-repeat;
			background-size: 100% 100%;
			font-size: $uni-font-size-sm;
			color: #FFFFFF;
			align-items: baseline;
			box-sizing: border-box;
			// flex:  0 0 auto;
			padding-top: 25rpx;
			padding-left: 23rpx;

			.pingfen-num {
				width: 67rpx;
				height: 32rpx;
				background: url('https://qiniu-cdn.maeiyun.com/imgs/hotel/b1.png')no-repeat;
				background-size: 100% 100%;
				text-align: center;
				line-height: 32rpx;
				font-size: $uni-font-size-base;
				margin-top: 10rpx;
			}

			.commont-lines {
				font-size: $uni-font-size-sm;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #848382;
				line-height: 30rpx;
				margin-top: 7rpx;
			}
		}

		.location-comment {
			// flex-grow: 1;
			display: flex;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #969696;
			width: 460rpx;
			height: 146rpx;
			background: url('https://qiniu-cdn.maeiyun.com/imgs/hotel/a1.png')no-repeat;
			background-size: 100% 100%;
			padding: 30rpx;
			box-sizing: border-box;

			.left-local {
				max-width: 60%;

				.nums {
					font-size: $uni-font-size-base;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #656667;
					line-height: 29rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 设置显示的行数 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.juli {
					font-size: $uni-font-size-sm;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #969696;
					line-height: 30rpx;
					margin-top: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.right-info {
				margin-left: 24rpx;
				display: flex;
				align-items: center;
				font-size: $uni-font-size-sm;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #656667;
				line-height: 30rpx;
				text-align: center;

				image {
					width: 56rpx;
					height: 56rpx;
				}
			}

		}

	}

	//
	.list {
		// padding: 0 30rpx;
		margin-top: 86rpx;
		border-radius: 20rpx;
	}

	.item-list {
		margin-bottom: 86rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 30rpx;
		padding-bottom: 30rpx;

		.inner-item-hotel {
			display: flex;
			align-items: flex;
			padding: 21rpx 0 0 0;
			box-sizing: border-box;
			position: relative;
		}

		.hotel-img {
			width: 288rpx;
			height: 180rpx;
			border-radius: 20rpx;
			margin-right: 21rpx;
			margin-top: -40rpx;
			position: relative;
			top: -40rpx;
		}

		.unpack-img {
			width: 34rpx;
			height: 34rpx;
			position: absolute;
			right: 0;
			top: 24rpx;
		}

		.rotate180 {
			transition: transform 0.6s;
			transform-style: preserve-3d;
			transform: rotate(180deg);
		}

		.rotate180-dao {
			transition: transform 0.6s;
			transform-style: preserve-3d;
			transform: rotate(0);
		}

		.right-hotel-info {
			flex: 1;
			.hotel-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #2A2B2E;
				line-height: 40rpx;
				margin-bottom: 10rpx;
				overflow: hidden;
				white-space: wrap;
				flex-direction: column;
				padding-right: 30rpx;

			}

			.score-lines {
				display: flex;
				align-items: center;
				margin: 20rpx 0;

				.pingfen {
					width: 127rpx;
					background: url('../../static/index/jiudian-bg.png')no-repeat;
					background-size: 100% 100%;
					font-size: 20rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 8rpx;
					height: 30rpx;
					line-height: 30rpx;
				}

				.nums {
					font-size: 20rpx;
					font-weight: 400;
					color: #656667;
					margin-left: 18rpx;
				}
			}

			.room-introduction {
				font-size: $uni-font-size-base;
				font-weight: 400;
				color: #656667;
				line-height: 33rpx;
			}

			.tits {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10rpx;

				.item-tit {
					font-size: $uni-font-size-sm;
					font-weight: 400;
					color: #B4B4B4;
					height: 32rpx;
					line-height: 32rpx;
					border-radius: 4rpx;
					border: 1rpx solid #D3D3D3;

				}
			}

		}
	}

	.inner-price {
		text-align: center;
	}

	.price-lines {
		font-size: $uni-font-size-base;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #EE2300;
		text-align: right;

		.price {
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #EC2700;
		}
	}

	.yuding-btn {
		width: 120rpx;
		height: 50rpx;
		background: #EF5233;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 9rpx;
	}

	.list-content-inner {
		padding: 0 30rpx;
		border-radius: 16rpx;
		background: #FAFAFA;
		margin-top: -16rpx;
	}

	.inner-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		border-top: 1rpx solid #E2E2E2;

		// margin-bottom: 10rpx;
		.inner-inner-right-hotel-info {
			padding: 20rpx 0;
			max-width: 60%;

			.hotel-title {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.inner-room-introduction {
			margin-top: 10rpx !important;
			margin-bottom: 0 !important;

		}

	}

	//弹窗样式
	.room-popup-content {
		background-color: #F5F7F8;
		width: 100vw;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		overflow: hidden;
		position: relative;
		height: 90vh;
		overflow: hidden;
		overflow-y: scroll;
		padding-bottom: 130rpx;

		.swiper-content {}

		.close-img {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			z-index: 99;
		}

		.swiper-content {
			position: relative;
		}

		.room-popup-swiper {
			width: 100%;
			height: 422rpx;

			.item-room-popup-swiper {
				width: 100%;
				height: 422rpx;

				.item-room-popup-swiper-content {
					width: 100%;
					height: 422rpx;

					image {
						width: 100%;
						height: 422rpx;
					}
				}
			}
		}

		.room-introduction {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-top: 30rpx;

			.introduction-title {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				color: #2A2B2E;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				image {
					width: 27rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
			}

			.tit-list {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.each-tit {
					text-align: center;
					font-size: $uni-font-size-base;
					font-weight: 500;
					color: #2E3031;
					line-height: 40rpx;

					image {
						width: 38rpx;
						height: 34rpx;
					}
				}

			}

			.lines-content {
				margin-bottom: 30rpx;

				.lines-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #2A2B2E;
					line-height: 40rpx;
					margin-bottom: 10rpx;
				}

				font-size: 24rpx;
				font-weight: 400;
				color: #7F8082;
				line-height: 40rpx;
			}
		}

		.popup-room-price {
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			height: 120rpx;
			background: #FFFFFF;
			line-height: 120rpx;
			margin-top: 30rpx;
			padding-right: 30rpx;
			padding-top: 16rpx;
			display: flex;
			align-items: center;

			.price-lines {
				width: 350rpx;
				font-size: 18rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				height: 88rpx;
				background: #EF5233;
				line-height: 88rpx;
				border-radius: 44rpx;
				margin-left: auto;

				.price {
					font-size: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

	}
</style>